<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div>
      用户名:
      <input type="text" id="username" v-model = 'a'>
      <br> 密码:
      <input type="password" id="password" v-model = 'b'>
      <br>
      <span style="color: red">{{result}}</span>
      <button v-on:click = 'handleClick()'>登录</button>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    // 需求: 点击按钮, 要得到用户在输入框输入的用户名和密码,如果用户名和密码是zhangsan和123456, 则在span标签内部显示: 登录成功, 否则显示用户名或者密码错误
    // 思考, 双向数据绑定的用途究竟是什么?
    var vm = new Vue({
      el: '#app',
      data: {
        a:'',
        b:'',
        result:''
      },
      methods: {
        handleClick: function(){
          console.log('haha');
          if(this.a == 'zhangsan' && this.b == '123456') {
            this.result = '登陆成功'
          } else {
            this.result = '登陆失败'
          }
        }
      }
    })
  </script>
</body>

</html>